<template>
<div class="bgimg">
  <div class="main">
    <message :top1="top1" :visible3="visible3" :xfmsg="xfmsg" :left="left1" />
    <div v-show="visible">
      <ul id="menu" class="menu"  v-show="visible" :style="{left:left+'px',top:top+'px'}">
        <li class="menu__item" @click="">查看好友</li>
        <li class="menu__item" @click="doDelete()">好友删除</li>
      </ul>
    </div>
      <div class="friend">
        <el-menu
          @open="handleOpen"
          @close="handleClose"
          background-color="white"
          text-color="black">
          <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span>好友列表</span>
          </template>
          <el-menu-item-group v-for="(friend,index) in friends" :key="index" >
            <el-menu-item  ref="where" @click="getid(friend)" @contextmenu.prevent.native ="openMenu($event,friend.id)" style="padding-left:20px;min-width:100%;color:black" 
            >
              <img :src="friend.pic" style="width:40px;margin-right:10px" @mouseover="doMsg($event,friend.id)"
            @mouseout="doXiaoshi()" alt="">
              {{friend.userName}}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
      </div>
      <div class="context" style="">
        <img :src='imgUrl' style="width:80px;vertical-align: middle;top:13%;position:absolute;left:38%;border-radius:60%" />
        <p style="left:50%;position:absolute;top:12%;font-weight:bold">{{username}}</p>
        <p style="left:50%;position:absolute;top:20%;font-size:10px">{{signature}}</p>
        <div style="position:absolute;top:50%;left:38%;width:70%;height:50%">
        <el-card @click.native="addfriend()" shadow="hover" style="padding:0px;position:absolute;">
          <img src="../assets/add.png">
          <p style="margin:0">添加好友</p>
        </el-card>
        <el-card @click.native="revise()" shadow="hover" style="padding:0px;position:absolute;left:20%">
          <img src="../assets/revise.png" alt="">
          <p style="margin:0">修改资料</p>
        </el-card>
        <el-card @click.native="doEsc()" shadow="hover" style="padding:0px;position:absolute;top:40%;left:20%">
          <img src="../assets/tuichu.png" alt="">
          <p style="margin:0">退出登录</p>
        </el-card>
        <agree  style="" />         
        </div>
      </div>
  <router-view />
  </div>
</div>
</template>

<script>
import agree from '../components/agree.vue';
import revise from '../components/revise.vue';
import message from '../components/message.vue';
export default {
 components:{
   revise,agree,message
 },
  data () {
    return {
      imgUrl:'',
      friends:[],
      friendName:'',
      fromUserId:'',
      fromName:'',
      //当前用户名称
      username:'',
      msgsl:'',
      list:[],
      visible: false,
			top: 0,
      left: 0,
      deleteId:'',
      signature:'',
      visible3: false,
      top1:'',
      xfmsg:[],
      left1:'',
      screenWidth: document.body.clientWidth,
      timer:'1'
    }
  },
  created() {
  },
  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    },
    screenWidth:{
      immediate:true,
      handler(newVal) {
        console.log('123')
        console.log(newVal)
        this.timer =1
        // if(newVal != 982 ){
        //   setTimeout(() =>{ 
            
        //       if(this.timer <=1){
        //   alert('屏幕比例100%体验更好哟！')
        //   this.timer = this.timer+1
        //   }
          
        //   },1000
        //   )}
        
      }
    }
  },
  mounted(){
    this.fromUserId = localStorage.getItem('fromUserId');
    this.username = localStorage.getItem('username');
    this.getImage(this.fromUserId)
    this.getFriends(this.fromUserId)
    const that = this
    window.onresize = () =>{
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
    // this.initWebSocket()
  //   //FF 谷歌
  //   if(window.devicePixelRatio>1||window.devicePixelRatio<1){
  //     alert('缩放比例设置成默认（100%），体验更好哦！')
  //     console.log(window.devicePixelRatio)  //正常1 正常100%状态
  //   }
  //   //IE
  //   if(window.screen.deviceXDPI!=window.screen.logicalXDPI){
  //     alert('缩放比例设置成默认（100%），体验更好哦！')
  //   }
  //    console.log(window.screen.deviceXDPI )//正常96 两者比例是1为正常100%状态
    //    console.log(window.screen.logicalXDPI)//正常96
 },
  methods: {
    //右键点击删除触发事件
    openMenu(e,id) {
      const menuMinWidth = 105
      const offsetLeft =e.target.getBoundingClientRect().left // container margin left
      const offsetWidth = e.target.offsetWidth // container width
      const maxLeft = offsetWidth - menuMinWidth // left boundary
      const left = e.clientX - offsetLeft // 15: margin right

      if (left > maxLeft) { 
        this.left = maxLeft
      } else {
        this.left = left
      }
      this.top = e.clientY - 60 // fix 位置bug
      this.visible = true
      this.deleteId = id;
    },
    closeMenu() {
      this.visible = false
    },

    doEsc(){
      localStorage.removeItem('token')
      this.$router.push('/login')
    },
    addfriend(){
      this.$router.push('/addfriend')
    },
    revise(){
      this.$router.push('/revise')
    },
    getid(friend){ 
      this.toUserId = friend.id;
      this.friendName = friend.userName;
      localStorage.setItem('toUserId',this.toUserId)
      localStorage.setItem('friendName',this.friendName)
      this.$router.replace('/chatpage')
    },
    getImage(id){
      let _this =this
      this.$axios.get('/api/website/user/info/'+id).then((resp) =>{
        _this.imgUrl = resp.user.pic
        _this.signature= resp.user.signature
      })
    },
    getFriends(f){
      this.$axios.get('/api/socket/relationship/info/'+f).then((resp) =>{
        // console.log(resp.relationship.friends)
        this.friends = resp.relationship.friends
        // console.log(this.friends)
      })
    },
    doDelete(){
      let form = {
        friendId:this.deleteId,
        id:this.fromUserId
      }
      this.$axios.post('/api/socket/relationship/delete',form).then((resp) =>{
        this.$message.success(resp.msg)
        this.$router.go(0)
      })
    },
  
    doMsg(e,id){
      let top = e.target.getBoundingClientRect().top-200
      console.log(top)
      this.left1 = e.target.getBoundingClientRect().left-250
      this.visible3 = true 
      this.top1 = top
      this.$axios.get('api/website/user/info/'+id,{
        headers:{isloading:false}
      }).then((resp) =>{
        this.xfmsg = resp.user
        if(resp.user.sex == true){
          this.xfmsg.sex = '男'
        }else{
          this.xfmsg.sex = '女'
        }
      
      })
    },
    doXiaoshi(){
      // console.log(this.visible3)
      this.visible3 = false
      // console.log(this.visible3)
      
    },
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
  }
}
</script>

<style scoped>
.main{
    height: 577px;
    width: 1075px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* border:1px solid ; */
    
}
.friend{
    height: 100%;
    width: 20%;
    position: absolute;
    left: 0;
    /* border: 1px solid; */
    float: left;
    background-color: white;
}
.context{
    height: 100%;
    width: 80%;
    position: absolute;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    left: 20%;
    background-color: #f1ecec;

    /* border: 1px solid; */
}
.input{ 
    width: 80%;
    top: 68%;
    position: relative;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    /* border: 1px solid; */
}
.item {
	display: flex;
	margin-bottom: 10px;
}
S
.left {
	flex-direction: row;
}

.right {
	flex-direction: row-reverse;
}

.right .message {
	margin-right: 10px;
}
.left .message{
	margin-left: 10px;
}
.message {
	border-radius: 10px;
	display: flex;
	background: #efefef;
	min-height: 25px;
	padding: 9px 10px;
	align-items: center;
	color: #222121;
}
.time{
  text-align: center;
  font-size: 8px;
}
 .menu__item {
    list-style-type: none;
    line-height: 20px;
    left:auto;
    width: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    /* font-size: 12px; */
    font-family:Tahoma;
  }
    .menu {
    padding:0;
    z-index: 3000;
    width: 100px;
    position: absolute;
    border-radius: 10px;
    border: 1px solid #999999;
    background-color: #f4f4f4;
  }
   .menu__item:hover {
    background-color: #1790ff;
    color: white;
  }
.bgimg {
		position: absolute;
		background: url(../assets/bg.png) no-repeat center;
		background-size: cover;
		height: 100%;
		width: 100%;
	}
</style>
<style>
.el-textarea__inner{
  border: none;
  line-height: 1.3;
}
.el-card__body{
  padding: 10px;
}
.el-card{
  width:16%;
  border-radius:10px;
}

</style>
